﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>全选练习</title>
</head>
<body>
<form method="post" action="">
  你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
  <br/>
  <input type="checkbox" name="items" value="足球"/>足球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  <br/>
  <input type="button" id="checkedAllBtn" value="全　选"/>
  <input type="button" id="checkedNoBtn" value="全不选"/>
  <input type="button" id="checkedRevBtn" value="反　选"/>
  <input type="button" id="sendBtn" value="提　交"/>
</form>
<script type="text/javascript">
  /*
   功能说明:
     1. 点击'全选': 选中所有爱好
     2. 点击'全不选': 所有爱好都不勾选
     3. 点击'反选': 改变所有爱好的勾选状态
     4. 点击'提交': 提示所有勾选的爱好
     5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
     6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
   技术点：
     1.DOM查询
     2.事件回调函数绑定
     3.checkbox操作
     4.事件回调函数中的this
     5.逻辑思维能力
   */

  window.onload = function () {

    var items = document.getElementsByName("items");

    //1.#checkedAllBtn
    var checkedAllBtn = document.getElementById("checkedAllBtn");
    checkedAllBtn.onclick = function () {
      setItemsChecked(true);
      checkedAllBox.checked = true;
    };

    //2.#checkedNoBtn
    var checkedNoBtn = document.getElementById("checkedNoBtn");
    checkedNoBtn.onclick = function () {
      setItemsChecked(false);
      checkedAllBox.checked = false;
    };
    //3.#checkedRevBtn
    var checkedRevBtn = document.getElementById("checkedRevBtn");
    checkedRevBtn.onclick = function () {
      setItemsChecked();
      //点满时将checkedAllBox.checked设置为true
      //统计当前items中被选中的个数
      checkedAllBox.checked = isAllChecked();
    };

    //4.#checkedAllBox
    var checkedAllBox = document.getElementById("checkedAllBox");
    checkedAllBox.onclick = function () {
      setItemsChecked(this.checked);
    };

    //5.#sendBtn
    var sendBtn = document.getElementById("sendBtn");
    sendBtn.onclick = function () {
      for (var i = 0; i < items.length; i++) {
        if (items[i].checked) {
          alert(items[i].value);
        }
      }
    };
    //6.items
    for (var i = 0; i < items.length; i++) {
      items[i].onclick = function () {
        //点满时将checkedAllBox.checked设置为true
        //统计当前items中被选中的个数
        checkedAllBox.checked = isAllChecked();
      }
    }

    function isAllChecked() {
      for (var j = 0; j < items.length; j++) {
        if (!items[j].checked)
          return false;
      }
      return true;
    }

    function setItemsChecked(checked) {
      for (var i = 0; i < items.length; i++) {
        items[i].checked = (checked == undefined) ? (!items[i].checked) : checked;
      }
    }
  }
</script>
</body>
</html>